<template>
  <div id="alert__rules__index">
    <div v-show="isMain" class="equip-wrap-common">
      <CustomTabs :tabList="tabList" :activeName="activeName" style="margin-bottom: 10px" @tabSelect="handelTabSelected" />
      <PushRules v-if="activeName === 'first'" />
      <NoticeTemplate v-if="activeName === 'second'" v-model:is-main="isMain" />
      <ShieldRules v-if="activeName === 'third'" />
      <ShieldList v-if="activeName === 'list'" />
      <AlarmPointManagement v-if="activeName === 'point'" />
      <AlarmDescription v-if="activeName === 'description'" />
    </div>
  </div>
</template>
<script lang="ts" setup>
defineOptions({
  name: "ALL_ALERT_RULES"
});

import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import CustomTabs from "@/components/Tabs/index.vue";

import AlarmDescription from "./components/AlarmDescription/index.vue";
import AlarmPointManagement from "./components/AlarmPointManagement/index.vue";
import NoticeTemplate from "./components/noticeTemplate.vue";
import PushRules from "./components/pushRules.vue";
import ShieldList from "./components/shieldList.vue";
import ShieldRules from "./components/shieldRules.vue";

const route = useRoute();
const router = useRouter();

const tabList = ref([
  {
    name: "first",
    label: "报警推送"
  },
  {
    name: "second",
    label: "通知模板"
  },
  {
    name: "third",
    label: "报警下线"
  },
  {
    name: "list",
    label: "个人屏蔽"
  },
  {
    name: "point",
    label: "报警点位管理"
  },
  {
    name: "description",
    label: "报警说明"
  }
]);

const activeName = ref("first");

onMounted(() => {
  if (route.query.tab) {
    handelTabSelected(route.query.tab, false);
  }
});

const isMain = ref(true);
const handelTabSelected = (selectName, resetRoute: boolean = true) => {
  activeName.value = selectName;
  if (resetRoute) {
    router.push({ query: {} });
  }
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
</style>
